<template>
    <div class="b-d">
        <!--<keep-alive include="front">-->

        <router-view />
        <!--</keep-alive>-->
        <div class="tabs">
            <router-link
                v-for="(page, index) in pages"
                :to="{path: page.path}"
                :key="index"
                class="tab"
            >
                <svg class="icon pic" aria-hidden="true">
                    <use :xlink:href="page.src" />
                </svg>
                <div class="tab_text">{{ page.name }}</div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bottom-tab",
        data() {
            return {
                pages: [
                    {
                        name: "推荐",
                        path: "front",
                        src: "#icon-shouye1"
                    },
                    {
                        name: "购物车",
                        path: "cart",
                        src: "#icon-gouwuche2"
                    },
                    {
                        name: "消息",
                        path: "news",
                        src: "#icon-xiaoxi1"
                    },
                    {
                        name: "订单",
                        path: "order-list-new?active=0",
                        src: "#icon-dingdan"
                    },
                    {
                        name: "我的",
                        path: "user",
                        src: "#icon-gerenzhongxinfuzhi"
                    }
                ]
            };
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~@/assets/main.styl';

    .b-d {
        background: grayE;
        margin-bottom: vw(50);

        .tabs {
            position: fixed;
            display: flex;
            bottom: 0;
            width: 100vw;
            padding: 3vw 0;
            align-items: center;
            background-color: sec-color;
            box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);

            .tab {
                width: 20%;
                text-align: center;

                .icon {
                    width: vw(18);
                    height: vw(18);
                    vertical-align: -0.15em;
                    overflow: hidden;
                    fill: tab-icon-color;
                }

                .tab_text {
                    font-size: 10px;
                    color: tab-icon-color;
                    line-height: 1.6;
                }
            }

            .router-link-active {
                .pic {
                    fill: main-color;
                }

                .tab_text {
                    color: main-color;
                }
            }
        }
    }
</style>